<template>
    <div class="maintainexploitgroupList" v-loading="state.loading">
        <el-card>
            <template #header>
				<div class="card-header clearfix">
                        <span class="headerTitle">{{state.title}}</span>
                        <div class="floatRight">
                            <el-button type="primary" v-if="isAuthBtn('add')" @click="tabBtn('add','')" ><i class="fa fa-send"></i>新增</el-button>
                        </div>
				</div>
			</template>
            <div>
                <div>
                    <div class="k-disply-inline-block" style="margin-right:10px;">
                        <el-select placeholder="状态" v-model="state.status" clearable>
                            <el-option label="全部" value=""></el-option>
                            <el-option label="开启" value="1"></el-option>
                            <el-option label="关闭" value="2"></el-option>
                        </el-select>
                    </div>
                    <el-button style="margin-left:10px;" @click="getGroupDataList(1)">查找</el-button>
                </div>
                <el-table
                    :data="state.dataList"
                    style="width: 100%; margin-bottom: 20px"
                    row-key="id" v-loading="state.tabloading"
                >
                    <el-table-column prop="id" label="编号"  align="center" min-width="100" />
                    <template  v-for="item,index in state.tabData.fields" :key="index">
                        <el-table-column :label="item.name" align="center"  min-width="200" >
                            <template #default="scope">
                                <div v-if="item.type=='upload'||item.type=='uploads'">
                                    <el-image style="width: 100px;height: 100px;" fit="cover" :src="item.type=='upload'?scope.row.value[item.title]:scope.row.value[item.title][0]" preview-teleported  :preview-src-list="item.type=='upload'?[scope.row.value[item.title]]:scope.row.value[item.title]">
                                        <template #error>
                                            <div style="line-height: 150px;text-align: center;">
                                                暂无图片
                                            </div>
                                        </template>
                                    </el-image>
                                </div>
                                <div v-if="item.type=='input'||item.type=='textarea'" class="k-line-2">
                                    {{scope.row.value[item.title]}}
                                </div>
                                <div v-if="item.type=='radio'" class="k-line-2">
                                    {{item.parameterList[scope.row.value[item.title]]}}
                                </div>
                                <div v-if="item.type=='checkbox'" class="k-line-2">
                                    <el-tag v-for="t,k in scope.row.value[item.title]" :key="k" style="margin-right:5px;">
                                        {{item.parameterList[t]}}
                                    </el-tag>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                     <el-table-column label="是否启用" align="center"  min-width="100" >
                        <template #default="scope">
                            <el-switch
                                v-model="scope.row.statusT"
                                class="ml-2"
                                width="60"
                                inline-prompt
                                active-text="启用"
                                inactive-text="停止"
                                @change="tabBtn('statusT',scope.row)"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column prop="order_num" label="排序"  align="center" min-width="100" />
                    <el-table-column fixed="right" label="操作" min-width="200" align="center">
                        <template #default="scope">
                            <el-button link type="primary" v-if="isAuthBtn('editor')" @click="tabBtn('editor',scope.row)">编辑</el-button>
                            <el-button link type="primary" v-if="isAuthBtn('del')" @click="tabBtn('del',scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-block clearfix">
				<div class="pagination-right">
					<el-pagination
					v-model:current-page="state.pages.pno"
					v-model:page-size="state.pages.pageSize"
					:page-sizes="[10, 50, 100, 200]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="state.pages.recordCount"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					/>
				</div>
			</div>
        </el-card>
        <!-- 修改弹窗 -->
		<el-dialog
            v-model="state.upShow"
            :title="state.detailData.id?'编辑数据':'添加数据'"
            center
        >
            <div v-if="state.upShow">
            <el-form :model="state.detailData" ref="detailDataRef"   label-width="180px" status-icon>
                <el-row :gutter="20">
                    <el-col :span="24" v-for="item,index in state.tabData.fields" :key="index">
                        <el-form-item :label="item.name" :prop="'value.'+item.title" :rules="{required: true, message: '请填写'+item.name, trigger: ['blur', 'change']}" >
                            <div style="width:100%;" v-if="item.type=='input'">
                                <el-input :placeholder="item.name" v-model="state.detailData.value[item.title]"  clearable />
                            </div>
                            <div style="width:100%;" v-if="item.type=='textarea'">
                                <el-input type="textarea" :placeholder="item.name" v-model="state.detailData.value[item.title]"  clearable />
                            </div>
                            <div style="width:100%;" v-if="item.type=='radio'">
                                <el-select :placeholder="item.name" v-model="state.detailData.value[item.title]" clearable>
                                    <el-option :label="it" :value="k" v-for="it,k in item.parameterList" :key="k" />
                                </el-select>
                            </div>
                            <div style="width:100%;" v-if="item.type=='checkbox'">
                                <el-select :placeholder="item.name" v-model="state.detailData.value[item.title]" multiple clearable>
                                    <el-option :label="it" :value="k" v-for="it,k in item.parameterList" :key="k" />
                                </el-select>
                            </div>
                            <div style="width:100%;" v-if="item.type=='upload'">
                                <div class="selectImg">
                                    <el-image style="width: 100%;height: 100%;" fit="cover" :src="state.detailData.value[item.title]">
                                        <template #error>
                                            <div style="line-height: 150px;text-align: center;">
                                                暂无图片
                                            </div>
                                        </template>
                                    </el-image>
                                    <div class="imgBtn">
                                        <i class="fa fa-eye" v-if="state.detailData.value[item.title]"  @click="selectBtn('eye',item)"></i>
                                        <i class="fa fa-trash-o selectDel" v-if="state.detailData.value[item.title]"  @click="selectBtn('del',item)"></i>
                                        <i class="fa fa-file-image-o" v-if="!state.detailData.value[item.title]" @click="selectBtn('select',item)"></i>
                                    </div>
                                </div>
                            </div>
                            <div style="width:100%;" v-if="item.type=='uploads'">
                                <div class="imgItem">
                                    <draggable item-key="index" :list="state.detailData.value[item.title]" animation="300" >
                                        <template #item="{ element }">
                                            <div class="selectImg">
                                                <el-image style="width: 100%;height: 100%;" fit="cover" :src="element">
                                                    <template #error>
                                                        <div style="line-height: 150px;text-align: center;">
                                                            暂无图片
                                                        </div>
                                                    </template>
                                                </el-image>
                                                <div class="imgBtn">
                                                    <i class="fa fa-eye" v-if="state.detailData.value[item.title]"  @click="selectBtn('eye',item,element)"></i>
                                                    <i class="fa fa-trash-o selectDel" v-if="state.detailData.value[item.title]"  @click="selectBtn('del',item,element)"></i>
                                                </div>
                                            </div>
                                        </template>
                                    </draggable>
                                </div>
                                <div class="imgItem">
                                    <div class="k-col-center k-row-center" style="padding:20px;display:flex;height: 150px;">
                                        <!-- <i class="fa fa-file-image-o"  @click="selectImgBtn('select',item)"></i> -->
                                        <el-button type="primary" plain @click="selectBtn('select',item)">选择图片</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="数据排序" prop="order_num" >
                            <el-input-number v-model="state.detailData.order_num" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="状态" prop="status" >
                            <el-radio-group v-model="state.detailData.status">
                                <el-radio label="1"  border>显示</el-radio>
                                <el-radio label="2"  border>隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="state.upShow = false;state.btnloading=false;">取消</el-button>
                    <el-button type="primary" @click="queding" :loading="state.btnloading" :disabled="state.btnloading">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!--附件弹窗-->
		<el-dialog
            v-model="state.selectImgShow"
            title="选择附件"
            center
            width="80%"
            append-to-body
        >
            <Accessory v-if="state.selectImgShow" :type="state.fileType" @select="fileSelectBtn"></Accessory>
        </el-dialog>
        <el-dialog v-model="imageShow">
            <img style="width:100%;" :src="imageUrl" alt="Preview Image" />
        </el-dialog>
    </div>
</template>
    
<script lang="ts" setup name="maintainexploitgroupList">
    import { toRefs,ref, reactive,onMounted, defineComponent,defineAsyncComponent } from 'vue';
    import { useRouter } from 'vue-router'
    import { ElNotification, ElMessage ,ElMessageBox ,FormRules,ElTree} from 'element-plus'
    import draggable from 'vuedraggable' //拖拽
    import { isModification } from '/@/utils/kingmin';//去重
    import { systemApi } from '/@/api';
    // 引入组件
    const Accessory= defineAsyncComponent(() => import('/@/components/accessory/index.vue'));
    const router = useRouter();
    const imageUrl = ref('')
    const imageShow = ref(false)
    const detailDataRef=ref();
    
    const state = reactive({
        roleBtn:router.currentRoute.value.meta.roleBtn,
        title:router.currentRoute.value.meta.title,
        btnloading:false,
        loading:true,
        dataList:[],
        pages: {
            isAll: false,
            pageCount: 0,
            pageSize: 10,
            recordCount: 0,
            pno: 1
          },
        status:"",
        tabData:"",
        detailData:{},
        upShow:false,
        originalData:{},
        fileType:'1',
        selectImgShow:false,
        item:{}
    });
    const queding=()=>{
        detailDataRef.value.validate((valid) => {
            if (valid) {
                // 修改
                let data=JSON.parse(JSON.stringify(state.detailData));
                state.btnloading=true;
                let dt={};
                if(state.detailData.id){
                    dt=isModification(data,state.originalData);
                    // let dt=state.detailData;
                    if(Object.values(dt).length>0){
                        dt.id=state.detailData.id;
                    }else{
                        ElMessage({message:'没有要修改的数据',type:"warning"});
                        state.upShow=false;
                        state.btnloading=false;
                        return false;
                    }
                    // console.log(dt)
                    upDataFun(dt);
                }else{
                    // console.log(data)
                    addDataFun(data);
                    
                }			
            }
        })
    }
    // 修改
    const upDataFun=(dt:object)=>{
        if(!dt){
            ElMessage.error('修改的数据为空');
            return false;
        }
        systemApi('upGroupData',dt).then(res=>{
            ElMessage({message:res.msg?res.msg:"操作成功",type:"success"});
            state.upShow=false;
            state.btnloading=false;
             getGroupDataList();
        })
        .catch(res=>{
            if(res.code!=450000){
                ElMessageBox.confirm(res.msg, '提示', {
                    confirmButtonText: '确定1',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {})
                .catch(() => {});
                state.btnloading=false;
            }
        })
    }
    // 新增
    const addDataFun=(dt:object)=>{
        if(!dt){
            ElMessage.error('新增的数据为空');
            return false;
        }
        systemApi('addGroupData',dt).then(res=>{
            ElMessage({message:res.msg?res.msg:"操作成功",type:"success"});
            state.upShow=false;
            state.btnloading=false;
            getGroupDataList();
        })
        .catch(res=>{
            if(res.code!=450000){
                ElMessageBox.confirm(res.msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {})
                .catch(() => {});
                state.btnloading=false;
            }
        })
    }
    const selectBtn=(e:string,t:string,i:string)=>{
        if(e=='eye'){
            if(i){
                imageUrl.value = i
            }else{
                imageUrl.value = state.detailData.value[t.title]
            }
            imageShow.value = true
        }
        if(e=='del'){
            if(i){
                let d=[];
                for(let j in state.detailData.value[t.title]){
                    if(state.detailData.value[t.title][j]!=i){
                        d.push(state.detailData.value[t.title][j]);
                    }
                }
                state.detailData.value[t.title]=d;
            }else{
                state.detailData.value[t.title]="";
            }
        }
        if(e=='select'){
            
            state.item=t;
            state.selectImgShow=true;
        }
    }
    const fileSelectBtn=(item)=>{
        for(let p of item){
            if(state.item.type=='upload'){
                state.detailData.value[state.item.title]=p.url;
            }else{
                state.detailData.value[state.item.title].push(p.url);
            }
        }
        state.selectImgShow=false;
    }
    const tabBtn=(e:string,item:object)=>{
        if(e=='add'){
            let a={};
            for(let p of state.tabData.fields){
                if(p.type=='uploads'||p.type=='checkbox'){
                    a[p.title]=[];
                }else{
                    a[p.title]=""
                }
            }
            
            state.detailData={
                order_num:100,
                status:'1',
                value:a,
                gid:router.currentRoute.value.params.id,
                id:'',
            };
            state.upShow=true;
        }
        if(e=='editor'){
            state.detailData=item;
            state.originalData=JSON.parse(JSON.stringify(item));
            state.upShow=true;
        }
        if(e=='statusT'){
            // console.log(item.statusT)
            let dt={
                status:item.statusT?'1':'2',
                id:item.id
            }
            upDataFun(dt);
        }
        if(e=='del'){
            ElMessageBox.confirm(
                '确定删除此数据吗?',
                '提示',
                {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning',
                }
            )
            .then(() => {
                let dt={
                    id:item.id,
                    isdel:1
                }
                upDataFun(dt);
                //  console.log(dt)
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
        }
    }
    // 获取数据详情
    const getGroupDataList=(pno:string|number)=>{
        state.tbloading =true;
        if(!pno){
            pno=1;
        }
        const dt={
            pages:{
                pno:pno,
                pageSize:state.pages.pageSize
            },
            data:{
                gid:router.currentRoute.value.params.id,
                status:state.status
            }
        };
        systemApi('groupDataList',dt).then(res=>{
            state.dataList=res.list;
            state.pages=res.pages;
            state.tabData=res.tabData;
            state.title=res.tabData.name;
            state.tbloading=false;
            state.loading=false;
        })
    }
    const handleSizeChange = (val: number) => {
        state.pages.pageSize=val;
        getGroupDataList();
    }
    const handleCurrentChange = (val: number) => {
        getGroupDataList(val);
    }
    // 权限判断
    const isAuthBtn = (e) => {
        let auth=false;
        if(e){
            for(let p of state.roleBtn){
                if(p==e){
                    auth=true;
                }
            }
        }
        return auth;
    };
    // 跳转
    const tourl = (e) => {
        router.push(e);
    };
    
    onMounted(()=>{
          // 获取当前路由实例参数
        //   console.dir(router.currentRoute.value.meta.roleBtn);
          if(!isAuthBtn('index')){
              router.push('/401');
          }else{
              //操作函数
            //   state.loading=false;
            getGroupDataList();
          }
    })
</script>
    
<style scoped lang="scss">
    .maintainexploitgroupList{
        padding:5px;
        .el-col {
            margin-bottom: 20px;
        }
        .imgItem{
            display: inline-block;
            vertical-align: bottom;
        }
    }
</style>
    